<script>
    import Props from '../components/props.svelte'
    import Props2 from '../components/props2.svelte'

    let count = 0;
    $: doubled = count * 2; // 类似vue的计算属性和watch
    $: console.log(`the count is ${count}`);
    $: {
        console.log(`the count is ${count}`);
        // alert(`I SAID THE COUNT IS ${count}`);
    }
    $: if (count >= 10) {
        // alert(`count is dangerously high!`);
        count = 9;
    }

	let numbers = [1, 2, 3, 4];
    
	function addNumber() {
// 		numbers.push(numbers.length + 1);
		numbers[numbers.length] = numbers.length + 1;
	}

    $: sum = numbers.reduce((t, n) => t + n, 0);
    
    const pkg = {
		name: 'svelte',
		version: 3,
		speed: 'blazing',
		website: 'https://svelte.dev'
    };
    
</script>
<ol>
    <li>
        <button on:click="{()=>{++count}}">
            Clicked {count} {count === 1 ? 'time' : 'times'}
        </button>
    </li>
    <li>
        <p>{count} doubled is {doubled}</p>
    </li>
    <li>
        <p>{numbers.join(' + ')} = {sum}</p>
        <button on:click={addNumber}>
            Add a number
        </button>
    </li>
    <li>
        <!-- 父子组件传参 -->
        <Props num={5} />
        <!-- key 和子组件接受的对应的话可以直接通过对象解构传值 -->
        <Props2  {...pkg} /> 
    </li>
</ol>






